<template>
  <div>
    <!-- 吸附效果 -->
    <van-sticky :offset-top="0">
      <van-nav-bar title="商品详情" @click-left="onClickLeft">
        <template #left>
          <div class="nav-left">
            <img
              src="https://cdn-gdcws-imgs.gdcws.cn/demo/20240130/close.png"
            />
          </div>
        </template>

        <template #right>
          <div class="nav-right">
            <img
              src="https://cdn-gdcws-imgs.gdcws.cn/demo/20240130/share.png"
              @click="shareAction"
            />
            <img
              src="https://cdn-gdcws-imgs.gdcws.cn/demo/20240126/xin.png"
              @click="xinAction"
            />
          </div>
        </template>
      </van-nav-bar>
    </van-sticky>

    <!-- 轮播图 -->
    <div>
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>

        <!-- <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template> -->
      </van-swipe>
    </div>

    <!-- 上面5行 -->
    <div class="five-row">
      <div style="color: var(--cp-primary); font-size: 1.375rem">￥989.00</div>
      <div class="black-title">品牌</div>
      <div class="gray-title">女童黄色泳装</div>
      <div style="display: flex; margin-top: 6px">
        <img
          src="https://cdn-gdcws-imgs.gdcws.cn/demo/20240130/share.png"
          alt=""
        /><span style="">正品保证</span>

        <img
          style="width: 18px; height: 18px"
          src="https://cdn-gdcws-imgs.gdcws.cn/demo/20240126/xin.png"
          alt=""
        /><span style="">正品保证</span>
      </div>

      <!-- 横线 -->
      <van-divider />
    </div>

    <!-- 款式选择 -->
    <div class="style-select">
      <i class="black-title">款式选择</i>
      <img
        v-for="(img, index) in typeImgs"
        :key="index"
        :src="img"
        @click="imgClick(index)"
      />
    </div>

    <!-- 横线 -->
    <!-- <van-divider /> -->
    <!-- margin 三个数字，上，左右，下 -->
    <div
      style="
        margin: 16px 16px 8px;
        height: 0.0313rem;
        background-color: var(--cp-bg);
      "
    ></div>

    <!-- 尺码 -->
    <div>
      <van-cell title="尺码选择" is-link @click="xinAction" />
      <van-cell title="尺码指南" is-link @click="chimaAction" />
    </div>

    <!-- 列表最下面几行 -->
    <div style="margin-left: 1rem; margin-right: 1rem">
      <div>
        <i class="gray-title">cemarose ID:1234568</i>
        <!-- 横线 -->
        <van-divider />
        <div class="black-title">面料材质</div>
        <div
          style="margin-top: 1rem; color: var(--cp-text2); font-size: 0.75rem"
        >
          面料材质
        </div>

        <!-- 横线 -->
        <van-divider />
      </div>
    </div>

    <br />

    <!-- 页面底部2大行 -->
    <HorizontalScrollView
      title="品牌类型"
      @clickmore="moreClick('111')"
      @clickitem="itemClick('111')"
    />

    <HorizontalScrollView
      title="同类商品"
      @clickmore="moreClick('222')"
      @clickitem="itemClick('222')"
    />

    <br />
    <br />

    <!-- 吸附效果 -->
    <van-sticky :offset-bottom="0">
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#F599A0" />
        <van-action-bar-icon icon="shop-o" text="店铺" color="#F599A0" />
        <van-action-bar-button
          color="#000"
          type="warning"
          text="加入购物车"
          @click="router.push({ path: '/cart', query: { hidetabbar: '1' } })"
        />
        <van-action-bar-button color="#F599A0" type="danger" text="立即购买" />
      </van-action-bar>
    </van-sticky>

    <!-- 底部弹出 -->
    <van-popup v-model:show="showBottom" position="bottom">
      <div>
        <i
          style="
            display: inline-block;
            margin-left: 1.25rem;
            margin-top: 1.25rem;
          "
          >尺寸</i
        >
      </div>

      <!-- 自定义collection -->
      <div style="margin: 1.25rem">
        <div class="collection">
          <div
            class="coll-item"
            v-for="(item, index) in gridItemList"
            :key="item.id"
            :style="{
              background: activeButtonIndex === index ? 'black' : '#f7f7f7',
            }"
            @click="popItemClick(index)"
          >
            <i
              :style="{ color: activeButtonIndex === index ? '#fff' : 'black' }"
              >{{ item.title }}</i
            >
          </div>
        </div>
      </div>

      <!-- // 加减数量 -->
      <div style="display: flex; justify-content: center">
        <van-stepper
          v-model="stepperValue"
          theme="round"
          button-size="22"
          disable-input
        />
      </div>

      <br />
      <!-- 横线 -->
      <van-divider />

      <div class="bottom-view">
        <i>￥855288</i>
        <van-button
          type="default"
          style="
            border: none;
            background-color: #000;
            margin: 1rem;
            width: 90%;
            color: #fff;
          "
          @click="finishClick"
          >完成</van-button
        >
      </div>
    </van-popup>

    <!-- 分享 -->
    <van-share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import HorizontalScrollView from "@/views/category/components/HorizontalScrollView.vue";
import { ref } from "vue";
import { showToast } from "vant";

const router = useRouter();

// 关闭页面
const onClickLeft = () => history.back();

// 品牌，同类商品中点击item
const itemClick = (tag) => {
  console.log(tag);
  if (tag == "111") {
    //品牌类型
    router.push({
      path: "/category/goodsdetails",
      query: { isRecommendBrand: "0" },
    });
  } else {
    //同类商品
  }
};
// 点击更多
const moreClick = (tag) => {
  console.log(tag);
  if (tag == "111") {
    //品牌类型
    router.push({
      path: "/category/branddetails",
      query: { isRecommendBrand: "1" },
    });
  } else {
    //同类商品
    router.push({
      path: "/category/branddetails",
      query: { isRecommendBrand: "0" },
    });
  }
};

// 弹窗collection 数组
const gridItemList = ref([
  {
    id: "1",
    title: "55",
    select: true,
  },
  {
    id: "2",
    title: "666",
    select: false,
  },
  {
    id: "3",
    title: "88",
    select: true,
  },
  {
    id: "4",
    title: "99",
    select: false,
  },
]);
// 是否呼出底部弹窗
const showBottom = ref(false);
// 收藏、尺码选择弹窗
// 加减数量
const stepperValue = ref(2);
// 尺寸默认选中
const activeButtonIndex = ref(0);
const popItemClick = (index) => {
  console.log("尺寸切换");
  console.log(index);
  activeButtonIndex.value = index;
};
// 完成
const finishClick = () => {
  showBottom.value = false;
};

// 收藏(心形) // 尺码选择
const xinAction = () => {
  console.log("收藏被点击了");
  showBottom.value = true;
};

// 款式选择
const imgClick = (index) => {
  console.log("款式选择");
  console.log(index);
};

// 尺码指南
const chimaAction = () => {
  showToast("尺码指南");
};

// 分享
const showShare = ref(false);
const options = [
  { name: "微信", icon: "wechat" },
  { name: "微博", icon: "weibo" },
  { name: "复制链接", icon: "link" },
  { name: "分享海报", icon: "poster" },
  { name: "二维码", icon: "qrcode" },
];
const shareAction = () => {
  console.log("分享被点击了");
  showShare.value = true;
};
const onSelect = (option) => {
  console.log(option.name);
  showShare.value = false;
};

// 轮播图数组
const images = [
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
];

// 款式选择数组
const typeImgs = [
  "https://cdn-gdcws-imgs.gdcws.cn/demo/20240130/yifu.png",
  "https://cdn-gdcws-imgs.gdcws.cn/demo/20240130/yifu.png",
  "https://cdn-gdcws-imgs.gdcws.cn/demo/20240130/yifu.png",
  "https://cdn-gdcws-imgs.gdcws.cn/demo/20240130/yifu.png",
  "https://cdn-gdcws-imgs.gdcws.cn/demo/20240130/yifu.png",
  "https://cdn-gdcws-imgs.gdcws.cn/demo/20240130/yifu.png",
];
</script>

<style lang="scss" scoped>
// 导航左按钮
.nav-left {
  img {
    width: 16px;
    height: 16px;
  }
}

// 导航右按钮
.nav-right {
  img {
    margin-left: 1rem;
    width: 16px;
    height: 16px;
  }
}

// 自定义图标标识
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

// 灰色标题
.gray-title {
  margin-top: 6px;
  color: var(--cp-tip);
  font-size: 10px;
}

// 黑体标题
.black-title {
  color: #000;
  font-size: 14px;
}

// 商品图下面带横线5行
.five-row {
  margin: 0 1rem;
  img {
    width: 16px;
    height: 16px;
  }

  span {
    margin-left: 8px;
    margin-right: 16px;
    color: var(--cp-text2);
    font-size: 0.75rem;
  }
}

// 款式选择
.style-select {
  margin: 0 1rem;
  img {
    margin-left: 1.25rem;
    width: 16px;
    height: 24px;
  }
}

// 弹窗样式
.collection {
  margin: 1rem;
  display: flex;
  flex-flow: row wrap; //主轴方向和换行属性复合写法:
  justify-content: space-between;
  text-align: center;
  align-items: center;

  .coll-item {
    margin: 0.5rem;
    width: 20%;
    height: 30px;
    background-color: #f7f7f7;

    i {
      line-height: 30px;
    }
  }
}

::v-deep(.van-grid-item__content) {
  // 其中 !import 具有优先权 ,提升指定样式规则的应用优先权。
  //   background-color: #f2f2f2 !important;
  background-color: #eae8e8f0;
  color: #333;
  padding: 0.5rem 0.3125rem;
}

::v-deep(.van-stepper--round .van-stepper__minus) {
  color: black;
  border: 1px solid black;
}

.bottom-view {
  display: block;
  justify-content: center;
  align-items: center;
  text-align: center;

  i {
    display: block;
    color: var(--cp-primary);
  }
}

// .icon-container {
//   position: relative; /* 必须设置position属性 */
// }
// .icon-container::before {
//   content: ""; /* 必须有content属性 */
//   width: 28px; /* 根据需求调整大小 */
//   height: 28px; /* 根据需求调整大小 */
//   background: url("https://cdn-gdcws-imgs.gdcws.cn/demo/20240130/close.png")
//     no-repeat top left / 28px 28px; /* 替换成你想要显示的图片路径 */
//   position: absolute; /* 必须设置position属性 */
//   top: 8px;
//   left: 0px;
//   z-index: 555;
// }
</style>
